<html>
<head>
<title>指令监测</title>
<link rel="stylesheet" href="/css/h.css">
<script src="/js/echarts-4.6.0.js"></script>
<script src="/js/h.js"></script>
</head>
<body>
<div id="queue" style="width:800px;height:600px;"></div>
<script type="text/javascript">
var qdiv = document.getElementById('queue');
//alert(document.body.clientWidth);
//alert(qdiv.style.width);
if(document.body.clientWidth>900){
	var newWidth = document.body.clientWidth - 100;
	qdiv.style.width = newWidth+"px";
}
var myChart = echarts.init(qdiv);
var option = {
	    title: {
	        text: '指令数据',
	        subtext: '并发和队列'
	    },
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            type: 'cross',
	            label: {
	                backgroundColor: '#283b56'
	            }
	        }
	    },
	    legend: {
	        data:['指令并发数', '指令队列']
	    },
	    toolbox: {
	        show: true,
	        feature: {
	            dataView: {readOnly: false},
	            restore: {},
	            saveAsImage: {}
	        }
	    },
	    dataZoom: {
	        show: false,
	        start: 0,
	        end: 100
	    },
	    xAxis: [
	        {
	            type: 'category',
	            boundaryGap: true,
	            data: (function (){
	                var now = new Date();
	                var res = [];
	                var len = 10;
	                while (len--) {
	                    res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
	                    now = new Date(now - 2000);
	                }
	                return res;
	            })()
	        },
	        {
	            type: 'category',
	            boundaryGap: true,
	            data: (function (){
	                var res = [];
	                var len = 10;
	                while (len--) {
	                    res.push(10 - len - 1);
	                }
	                return res;
	            })()
	        }
	    ],
	    yAxis: [
	        {
	            type: 'value',
	            scale: true,
	            name: '并发数',
	            
	            min: 0,
	            boundaryGap: [0.2, 0.2]
	        },
	        {
	            type: 'value',
	            scale: true,
	            name: '指令数',
	            
	            min: 0,
	            boundaryGap: [0.2, 0.2]
	        }
	    ],
	    series: [
	        {
	            name: '指令队列',
	            type: 'bar',
	            xAxisIndex: 1,
	            yAxisIndex: 1,
	            data: (function (){
	                var res = [];
	                var len = 10;
	                while (len--) {
	                    res.push(Math.round(Math.random() * 1000));
	                }
	                return res;
	            })()
	        },
	        {
	            name: '指令并发数',
	            type: 'line',
	            data: (function (){
	                var res = [];
	                var len = 0;
	                while (len < 10) {
	                    res.push((Math.random()*10 + 5).toFixed(1) - 0);
	                    len++;
	                }
	                return res;
	            })()
	        }
	    ]
	};
myChart.setOption(option);

	var appCount = 11;
	setInterval(function (){
	    var axisData = (new Date()).format("hh:mm:ss");

	    var data0 = option.series[0].data;
	    var data1 = option.series[1].data;
	    data0.shift();
	    data0.push(Math.round(Math.random() * 1000));
	    data1.shift();
	    data1.push((Math.random() * 10 + 5).toFixed(1) - 0);

	    option.xAxis[0].data.shift();
	    option.xAxis[0].data.push(axisData);
	    option.xAxis[1].data.shift();
	    option.xAxis[1].data.push(appCount++);

	    myChart.setOption(option);
	}, 2100);

</script>
</body></html>

